<template>
  <div>
    <el-col :span="24">
      <tabs value="name1">
        <tab-pane label="基本信息" name="name1">
        <div class="center">
          <el-row :gutter="20">
            <el-col :span="24" class="h">
              <el-col :span="22">
                <h3>基本信息</h3>
              </el-col>
              <el-col :span="2">
<!--                <div>
                  <el-dropdown class="user-name" trigger="click">
                    <span class="el-icon-setting" style="color: #fff;"></span>
                    <el-dropdown-menu slot="dropdown" style="width: 65px">
                      <el-button style="background: #1f9f91;">修改</el-button>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>-->
              </el-col>
            </el-col>
          </el-row>
          <el-row :gutter="20">

            <el-col :span="24" style="padding-top: 20px">
              <el-col :span="11">
                <el-col :span="6">
                  <span>名称</span>
                </el-col>
                <el-col :span="15">
                  <input type="text" class="search-input" value="中华医学会2013年学术会议暨中华医学奖2012颁奖大会">
                </el-col>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-col :span="6">
                  <span>状态  </span>
                </el-col>
                <el-col :span="15">
                  <input type="text" class="search-input" value="计划中  ">
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" style="padding-top: 20px">
              <el-col :span="11">
                <el-col :span="6">
                  <span>起止日期   </span>
                </el-col>
                <el-col :span="15">
                  <input type="text" class="search-input" value="2020.06.29-03">
                </el-col>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-col :span="6">
                  <span>审批状态  </span>
                </el-col>
                <el-col :span="15">
                  <input type="text" class="search-input" value="未审批">
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" style="padding-top: 20px">
              <el-col :span="11">
                <el-col :span="6">
                  <span>省市地址   </span>
                </el-col>
                <el-col :span="15">
                  <input type="text" class="search-input" value="陕西  西安  ">
                </el-col>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-col :span="6">
                  <span>联系人  </span>
                </el-col>
                <el-col :span="15">
                  <input type="text" class="search-input" value="张一山  ">
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" style="padding-top: 20px">
              <el-col :span="11">
                <el-col :span="6">
                  <span>联系信息   </span>
                </el-col>
                <el-col :span="15">
                  <input type="text" class="search-input" value="13824530983">
                </el-col>
              </el-col>
              <el-col :span="11" :offset="2">
                <el-col :span="6">
                  <span>计划参会者  </span>
                </el-col>
                <el-col :span="15">
                  <input type="text" class="search-input" value="杨安  ">
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" style="padding-top: 20px;padding-bottom: 50px">
              <el-col :span="11">
                <el-col :span="6">
                  <span>实际参会者   </span>
                </el-col>
                <el-col :span="15">
                  <input type="text" class="search-input" value="徐天  ">
                </el-col>
              </el-col>
            </el-col>

          </el-row>
        </div>
        </tab-pane>

        <tab-pane label="参会信息" name="name2">
          <el-row class="row" id="two">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>会议内容</h3>
                  </el-col>
                  <el-col :span="2">
                    <div>
                      <el-dropdown class="user-name" trigger="click">
                        <span class="el-icon-setting" style="color: #fff;font-size: 22px"></span>
                        <el-dropdown-menu slot="dropdown">
                          <button class="btn" style="color: #deb81b">增加</button><br>
                          <button class="btn" style="color: #1f9f91">修改</button><br>
                          <button class="btn" style="color: #e85656">删除</button><br>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">

                  <el-col :span="24" style="padding-top: 20px">
                    <el-col :span="11">
                      <el-col :span="6">
                        <span>产品  </span>
                      </el-col>
                      <el-col :span="15">
                        <input type="text" class="search-input" value="德谷胰岛素  ">
                      </el-col>
                    </el-col>
                    <el-col :span="11" :offset="2">
                      <el-col :span="6">
                        <span>关键信息    </span>
                      </el-col>
                      <el-col :span="15">
                        <input type="text" class="search-input" value="证明德谷胰岛素的有效性和显著减少夜间低血糖的安全性    ">
                      </el-col>
                    </el-col>
                  </el-col>
                  <el-col :span="24" style="padding-top: 30px;padding-bottom: 0px">
                    <!--<el-col :span="11">
                      <el-col :span="6">
                      <span>标签和内容     </span>
                      </el-col>
                      <el-col :span="15">
                      <input type="text" class="search-input" value="德谷胰岛素、低血糖、有效性   ">
                      </el-col>
                      </el-col>-->
                  </el-col>

                </el-col>
              </el-row>
            </div>
          </el-row>
          <!--三行-->
          <el-row class="row" id="three">
            <el-col :span="11">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">


                    <el-col :span="22">
                      <p>涉及区域</p>
                    </el-col>
                    <el-col :span="2" style="float: right;">
                      <div>
                        <el-dropdown class="user-name" trigger="click">
                          <span class="el-icon-setting" style="color: #fff;font-size: 22px"></span>
                          <el-dropdown-menu slot="dropdown">
                            <button class="btn" style="color: #deb81b">全选</button><br>
                            <button class="btn" style="color: #1f9f91">全取消</button><br>
                            <button class="btn" style="color: #e85656">搜索</button><br>
                          </el-dropdown-menu>
                        </el-dropdown>
                      </div>
                    </el-col>
                  </el-col>

                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">


                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

            <el-col :span="11" :offset="2">
              <div class="center">
                <el-row>
                  <el-col :span="24" class="h">
                    <p>讲者</p>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-card shadow="hover" :body-style="{ height: '100%'}">
                      <div :style="{width: '100%', height: '400px'}">

                        <div>
                          <div class="list-wrap">
                            <div class="item-doctor" v-for="doctor in doctor">
                              <input type="checkbox" class="check-it">
                              <img class="photo" src="../../../assets/img/photo.png">
                              <div class="desc-wrap">
                                <p class="name">
                                {{doctor.name}}
                                <!--                              <span class="color-tag" :class=doctor.class>{{doctor.department}}</span>-->
                                </p>
                                <p class="desc">
                                <span class="list-area">{{doctor.hospital}}</span>
                                </p>
                              </div>
                              <p class="tags-wrap">
                              <span>主任医师</span>
                              <span>{{doctor.department}}</span>
                              <span>区域级KOL</span>
                              </p>
                            </div>
                          </div>
                        </div>

                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>

          </el-row>
          <!--四行-->
          <el-row class="row" id="four">
            <div class="t-footer center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>参会者</h3>
                  </el-col>
                  <!--<el-col :span="2">
                    <div>
                      <el-dropdown class="user-name" trigger="click">
                        <span class="el-icon-setting" style="color: #fff;font-size: 22px"></span>
                        <el-dropdown-menu slot="dropdown">
                          <button class="btn" style="color: #1f9e91">增加</button><br>
                          <button class="btn" style="color: #e85656">删除</button><br>
                          <button class="btn" style="color: #3ba2be">全选</button><br>
                          <button class="btn" style="color: #7b9e02">全取消</button><br>
                          <button class="btn" style="color: #dfb81b">发送微信邀请</button><br>
                          <button class="btn" style="color: #1f9f91">发送邮件邀请</button><br>
                          <button class="btn" style="color: #e85656">发送survey</button><br>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                  </el-col>-->
                </el-col>
              </el-row>
              <el-row :gutter="20">

                <table id="example" class="display table">
                  <thead align="left">
                    <tr class="sortable">
                      <th align="center"><input type="checkbox" class="checkall" /></th>
                      <th>ID</th>
                      <th v-for="key in gridColumns">
                        {{key}}
                      </th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th style="visibility:hidden"></th>
                      <th style="visibility:hidden"></th>
                      <th class="tfoot">名字</th>
                      <th class="tfoot">科室</th>
                      <th class="tfoot">医院</th>
                      <th class="tfoot">院外影响力</th>
                      <th class="tfoot">院内影响力</th>
                      <th class="tfoot">机构影响力</th>
                      <th class="tfoot">学术水平</th>
                      <th class="tfoot">药企会议合作度</th>
                      <th class="tfoot">KOL推广潜力</th>
                    </tr>
                  </tfoot>
                </table>
                <!--<el-col :span="24">
                  <el-card shadow="hover" :body-style="{ height: '100%'}">
                    <div :style="{width: '100%', height: '400px'}">
                      <div>
                        <div class="list-wrap">
                          <div class="item-doctor" v-for="doctor in doctor">
                            <input type="checkbox" class="check-it">
                            <img class="photo" src="../../../assets/img/photo.png">
                            <div class="desc-wrap">
                              <p class="name">
                              {{doctor.name}}
                              <span class="color-tag" :class=doctor.class>{{doctor.department}}</span>
                              </p>
                              <p class="desc">
                              <span class="list-area">{{doctor.hospital}}</span>
                              </p>
                            </div>
                            <p class="tags-wrap">
                            <span>疾病认知水平</span>
                            <span>疾病认知水平</span>
                            <span>疾病认知水平</span>
                            <span>疾病认知水平</span>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>-->
              </el-row>
            </div>
          </el-row>
        </tab-pane>
        <tab-pane label="预算" name="name3">
          <el-row class="row" id="two">
            <div class="center">
              <el-row :gutter="20">
                <el-col :span="24" class="h">
                  <el-col :span="22">
                    <h3>费用及预算</h3>
                  </el-col>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24">

                  <el-col :span="24" style="padding-top: 20px">
                    <el-col :span="11">
                      <el-col :span="6">
                        <span>金额</span>
                      </el-col>
                      <el-col :span="15">
                        <input type="text" class="search-input" value="2000">
                      </el-col>
                    </el-col>
                    <el-col :span="11" :offset="2">
                      <el-col :span="6">
                        <span>实际金额</span>
                      </el-col>
                      <el-col :span="15">
                        <input type="text" class="search-input" value="1000">
                      </el-col>
                    </el-col>
                  </el-col>
                  <el-col :span="24" style="padding-top: 20px;padding-bottom: 50px">
                    <el-col :span="11">
                      <el-col :span="6">
                        <span>标签和内容     </span>
                      </el-col>
                      <el-col :span="15">
                        <input type="text" class="search-input" value="德谷胰岛素、低血糖、有效性   ">
                      </el-col>
                    </el-col>
                  </el-col>

                </el-col>
              </el-row>
            </div>
          </el-row>
        </tab-pane>
      </tabs>
    </el-col>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        gridColumns: ['姓名', '科室', '医院', '院外影响力', '院内影响力', '机构影响力', '学术水平', '药企会议合作度', 'KOL推广潜力'],
        doctor: [
          {name: '吴一龙',department:'肿瘤科',class:'green',hospital:'上海东方医院'},
          {name: '邢晓萍',department:'医务科',class:'yellow',hospital:'上海市浦东新区南汇精神卫生中心'},
          {name: '黄微宜',department:'精神心理科',class:'dark_green',hospital:'上海市浦东新区南汇精神卫生中心'},
          {name: '闵婕',department:'精神科',class:'red',hospital:'上海市浦东新区精神卫生中心'},
          {name: '李远者',department:'临床心理科',class:'green',hospital:'上海东方医院'},
          {name: '赵旭东',department:'临床心理科',class:'yellow',hospital:'上海东方医院'},
        ]
      }
    },
    components: {

    },
    mounted() {
      this.table()
    },
    methods: {
      table() {
        /*表格*/
        $(document).ready(function () {
          // 设置-添加一个文本输入到每个页脚单元格
          $('#example tfoot th').each(function () {
            var title = $(this).text();
            $(this).html('<input id="ipt" type="text" placeholder="搜索" />');
          });
          /*全选*/
          $(".checkall").click(function () {
            var check = $(this).prop("checked");
            $(".checkchild").prop("checked", check);
          });
          //不显示任何错误信息
          $.fn.dataTable.ext.errMode = 'none';
          // 资料表
          var table = $('#example').DataTable(
            {
              language:{
                "sSearch": "搜索:",
                "oPaginate": {
                  "sPrevious": "上一页",
                  "sNext": "下一页",
                }
                },
              "ajax": "http://tlpt.yutaolife007.com/huimeidata/getHcps",
              "columns": [
                {
                  "sClass": "text-center",
                  "data": "ID",
                  "render": function (data, type, full, meta) {
                    return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                  },
                  "bSortable": false
                },
                { "data": "id" },
                {
                  "data": "name",
                  "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<a href="#/account/doctorXx">'+oData.name+"</a>");
                  },
                },
                { "data": "department" },
                { "data": "hospital" },
                { "data": "outEffect" },
                { "data": "inEffect" },
                { "data": "orgEffect" },
                { "data": "learningLevel" },
                { "data": "degreeCooperationMedical" },
                { "data": "kolExtensionForce" },
              ],
              columnDefs: [
                {
                  "width": "1px",
                  orderable: false,
                  className: 'select-checkbox',
                  targets: 0
                },
                {"width": "1px", "targets": 1},
                {"width": "10px", "targets": 2},
                {"width": "20px", "targets": 3},
                {"width": "100px", "targets": 4},
                {"width": "30px", "targets": 5},
                {"width": "30px", "targets": 6},
                {"width": "30px", "targets": 7},
                {"width": "30px", "targets": 8},
                {"width": "50px", "targets": 9},
                {"width": "40px", "targets": 10},
              ],
              dom: "Bfrtip",
              scrollY: true,
              buttons: ['colvis'],
              select: {
                style: 'os',
                selector: 'td:first-child'
              },
              order: [[1, 'asc']]
            },
          );
          // 应用搜索
          table.columns().every(function () {
            var that = this;
            $('input', this.footer()).on('keyup change', function () {
              if (that.search() !== this.value) {
                that
                  .search(this.value)
                  .draw();
              }
            });
          });
          $('.dt-buttons>button>span').html("");
        });
      }
    }

  }
</script>

<style >
  .ivu-tabs-nav{
  width: 100%;
  }
  .ivu-tabs-nav>div{
  width: 33.333%;
  text-align: center;
  }
  .ivu-tabs-tab{
  color: #fff;
  font-size: 20px;
  }
  .ivu-tabs-ink-bar{
    background-color: #e85656!important;
    height: 5px!important;
    position: absolute!important;
    left: 0!important;
    bottom: -5px!important;
  }
  .ivu-tabs-nav .ivu-tabs-tab-active{
    color: #fff!important;
    font-weight: bold!important;
  }
  .ivu-tabs-nav {
    border-bottom: 5px solid #fff!important;
  }
  .el-collapse-item__header{
    background-color: rgba(245, 245, 248, 0) !important;
    color: #fff!important;
  }
  .el-collapse-item__wrap{
    background-color: rgba(245, 245, 248, 0)!important;
    color: #fff!important;
  }
  .el-collapse-item__content{
    color: #fff!important;
  }


  .btn{
    width: 100%;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    background: #fff;
    border: 1px solid transparent;
/*    outline: none;*/
  }
  .row {
    padding-bottom: 30px;
  }
  .center {
    padding: 10px 40px;
    color: #fff;
    border-radius: 10px;
    background-image: url("../../../assets/blur-bg-blurred.jpg");
  }
  .h {
    border-bottom: 2px solid #fff;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }
  span {
    display: inline-block;
    height: 25px;
    font-size: 16px;
  }
  .el-button {
    border: none;
    color: #fff;
    font-size: 15px;
    height: 30px;
    padding: 8px 10px;
  }
  .search-input {
    margin-left: -8px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
    width: 100%;
  }
  .el-card{
    background-color: rgba(245, 245, 248, 0);
    border: none;
  }

  /**/
  .item-doctor{
    display: -webkit-box!important;
    height: 55px;
    display: -ms-flexbox!important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .check-it{
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #fff;
    cursor: pointer;
  }
  .photo{
    margin: 0 8px 0 8px;
  }
  .desc-wrap{
    width: 40%;
    flex-shrink: 0;
    color: #fff;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .name{
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .color-tag{
    display: inline-block;
    min-width: 42px;
    height: 20px;
    line-height: 20px;
    padding-right: 3px;
    padding-left: 3px;
    border-radius: 4px;
    font-size: 14px;
  }
  .green{
    background-color: #7b9e02;
  }
  .yellow{
    background-color: #deb81b;
  }
  .dark_green{
    background-color: #1f9e91;
  }
  .red{
    background-color: #e85656;
  }
  .desc{
    font-size: 12px;
  }
  .tags-wrap{
    flex-shrink: 1;
    -webkit-box-flex: 0;
    flex-grow: 0;
    overflow: hidden;
    height: 50px;
    line-height: 3;
  }
  .tags-wrap>span{
    font-size: 12px;
    margin-right: 24px;
    display: inline-block;
    color: #fff;
  }
.dt-button-collection>button:first-child{
    display: none!important;
  }
  a{
    color: #fff!important;
    text-decoration: none!important;
  }
  .table {
    width: 100%;
  }
  .scope {
    border-bottom: 1px solid #ddd;
  }
  .scope > td {
    padding: 0 8px;
    line-height: 35px;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  .scope > td > a {
    color: #fff;
    text-decoration: none;
  }
  thead {
    color: #fff;
  }
  tbody {
    background-color: rgba(0, 0, 0, .15);
    color: #fff;
  }
  tbody > tr {
    background-color: rgba(0, 0, 0, .15) !important;

  }
  tbody > tr > td {
    background-color: rgba(0, 0, 0, .15) !important;
  }
  td{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .tfoot{
    border-top: none !important;
  }
  .tfoot > input {
    width: 100%;
    padding: 3px;
    margin-left: -8px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
  }
  #example_filter > label > input {
    padding: 3px;
    padding-left: 8px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .15);
    height: 25px;
  }
  .dataTables_scrollBody{
    top: 45px!important;
    z-index: 99;
  }
  .dataTables_scrollFoot{
    position: absolute;
    top: 91px;
    z-index: 99;
  }
  #example_info{
    display: none;
    z-index: 99;
  }
  #example_paginate{
    position: relative;
    top: 55px;
    z-index: 99;
  }
  #example_info, #example_filter {
    color: #fff;
  }
  input::-webkit-input-placeholder {
    color: #fff;
  }
  #example_paginate {
    color: #ffffff !important;
  }
  #example_paginate > a {
    color: #fff !important;
  }
  .select-checkbox:before {
    border: 1px solid #fff !important;;
  }
  table {
    margin: 0 auto;
    width: 100%;
    clear: both;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
  }
  th,td {
    white-space: nowrap;
  }
  .text-center{
    text-align: center;
  }
  .t-footer{
    padding-bottom: 80px;
  }
  .dataTables_wrapper{
    margin-top: 10px;
  }
</style>
